<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../css/index.css"> 
	<title>Document</title>
<style>
/*外容器*/
.page-container{ position: relative; width: 750px; height: 100%; overflow:hidden; }
/*容器顶部*/
.page-top{ z-index: 99 ;border-bottom: 2px solid #e6e9f3; background: #fff;}
.page-title{ margin:30px 25px; height: 40px; line-height: 40px;font-size: 30px; text-align: center; }
.page-title a{ float: left; width:40px;height: 40px; background: url(../img/g_03.png) no-repeat; }
.page-serch{ display: block; margin:0 25px 25px 25px;padding-left: 50px; height: 62px; width:700px;border-radius:7px ; font-size:30px;
 background: #f3f4f9 url(../img/s_03.jpg) 20px 20px no-repeat;}

/*容器内容*/
.page-cont { padding:25px 0 88px 0;height: 100%; overflow: hidden; overflow-y: auto; }
.page-cont .p-title{padding:0 25px; width: 100%; height: 40px; line-height: 40px;font-size: 30px;  }
.page-cont ul{ overflow: hidden; }
.page-cont .ghide{ height: 0; }

.p-cont-t{display: block; padding:0 25px; width: 100%; height: 100px; line-height: 100px; font-size: 30px; border-bottom: 1px solid #c3c3c3;}
.p-cont-t i{ float: left; margin: 28px 15px auto auto; width: 45px;height: 45px; }
.page-cont-list .s-x{margin:0;float:right; width: 27px; height:100%; }

/*组织架构*/
.zuhi li{ margin-left:65px; display:block; width: 685px; min-height: 80px;line-height: 80px; font-size: 28px; border-bottom: 1px solid #dcdcdc;}
.zuhi a{display: block; color: inherit;}
.zuhi a i{ float: left; margin:20px 10px; width: 40px;height: 40px;}

/*常用联系人*/
.lianxiren li {  height: 110px; line-height: 110px;  }
.lianxiren img{float: left; margin:15px 20px; width: 80px; height: 80px; border-radius: 50%;}
.lianxiren .name{float: left; line-height: 110px; font-size: 30px; color: #3a3a3a;}
.lianxiren .zhiye{float: left;margin-left: 60px; line-height: 110px; font-size: 25px; color: #a1a1a1;}

/*图标*/
.x-no{ border-radius: 50%; border: 2px solid #a3a3a3; }                                                                  /*一个都没选择时*/
.some-xuan{ background: url(../img/a22_03.png) center no-repeat;  }                                           /*选择部分时  */
.all-xuan{ background: url(../img/dui_03.png) center no-repeat;  }                                                /* 全选*/
.zhe{ background: url(../img/zhe_07.png) no-repeat;  background-size: 40px 40px; }                   /*折线*/
.lg-icon { background-size: 45px 45px; width: 45px;height: 45px;}                                                                       /*一级图标基础样式*/
.sm-icon { background-size: 40px 40px;width: 40px;height: 40px;  }                                                                    /*二级图标基础样式*/
.xs-icon { margin:40px auto auto 25px;  float: left; background-size: 30px 30px; width: 30px;height: 30px; }     /*三级图标基础样式*/

/*底部信息*/
.botm{ position: absolute; bottom: 0;left: 0; z-index: 99; width: 100%; height: 88px; box-shadow: 0 1px 20px #f1f1f1; background: #fff; }
.botm .left,.botm .right{  margin-top: 11px; width: 185px; height: 66px; line-height: 66px; font-size: 30px; text-align: center; }
.botm .left{margin-left: 25px;  }
.botm .right{margin-right: 25px; border-radius: 5px; background: #2298fe; color: #fff; }

/*其他信息*/
.right{margin-right: 30px;}
.color1{ color: #2bb1ff; }
.color2{ color: #c8c8c8; }
.right, .color2{ font-size: 28px; }
.right.color2{ background: #fff; }
.g-left{ background: url(../img/rr_03.png) center no-repeat; }                                               /*左箭头*/
.g-down{ background: url(../img/down_06.png) center no-repeat; }                                     /*下箭头*/
</style>
</head>
<body>
<div class="page-container">
      <div class="page-top">
              <div class="page-title">
                      <a href="javascript:history.back(-1);"></a>
                      <span>选择部门教师</span>
              </div>
              <input type="text" class="page-serch" id="inp" placeholder="搜索人员">        
      </div>

      <div class="page-cont">
              <div class="p-title">
                    <span class="color1">全部联系人</span> 
                    <span class="color2">></span>
                    <span>选择部门教师</span>
              </div>

              <div class="page-cont-list">
                    <a class="p-cont-t"><i class="lg-icon"></i>校行政处 (<span>15</span>) <i class="s-x g-down"></i></a>
                    <ul class="zuhi">
                              <li>
                                   <a>
                                        <i class="zhe"></i><i class="sm-icon"></i>
                                        <span class="title">校长办</span>
                                        (<span>3</span>)
                                        <span class="right color2">下级</span>
                                   </a>
                                  <ul class="lianxiren" style="display: none;">
                                          <li>
                                                <i class="xs-icon x-no"></i>
                                                <img src="../img/t1.png" alt="">
                                                <span class="name">李晓玲</span>
                                                <span class="zhiye">班主任</span>
                                          </li>
                                          <li>
                                                <i class="xs-icon x-no"></i>
                                                <img src="../img/t5.png" alt="">
                                                <span class="name">赵萌萌</span>
                                                <span class="zhiye">语文老师</span>
                                          </li>
                                          <li>
                                                <i class="xs-icon x-no"></i>
                                                <img src="../img/t5.png" alt="">
                                                <span class="name">赵萌萌</span>
                                                <span class="zhiye">语文老师</span>
                                          </li>
                                  </ul>    
                             </li>
                             <li>
                                   <a>
                                        <i class="zhe"></i><i class="sm-icon"></i>
                                        <span class="title">德育办</span>
                                        (<span>3</span>)
                                        <span class="right color2">下级</span>
                                   </a>
                                  <ul class="lianxiren" style="display: none;">
                                          <li>
                                                <i class="xs-icon x-no"></i>
                                                <img src="../img/t1.png" alt="">
                                                <span class="name">李晓玲</span>
                                                <span class="zhiye">班主任</span>
                                          </li>
                                          <li>
                                                <i class="xs-icon x-no"></i>
                                                <img src="../img/t5.png" alt="">
                                                <span class="name">赵萌萌</span>
                                                <span class="zhiye">语文老师</span>
                                          </li>
                                          <li>
                                                <i class="xs-icon x-no"></i>
                                                <img src="../img/t5.png" alt="">
                                                <span class="name">赵萌萌</span>
                                                <span class="zhiye">语文老师</span>
                                          </li>
                                  </ul>    
                             </li>
                             <li>
                                   <a>
                                        <i class="zhe"></i><i class="sm-icon"></i>
                                        <span class="title">后勤办</span>
                                        (<span>3</span>)
                                        <span class="right color2">下级</span>
                                   </a>
                                  <ul class="lianxiren" style="display: none;">
                                          <li>
                                                <i class="xs-icon x-no"></i>
                                                <img src="../img/t1.png" alt="">
                                                <span class="name">李晓玲</span>
                                                <span class="zhiye">班主任</span>
                                          </li>
                                          <li>
                                                <i class="xs-icon x-no"></i>
                                                <img src="../img/t5.png" alt="">
                                                <span class="name">赵萌萌</span>
                                                <span class="zhiye">语文老师</span>
                                          </li>
                                          <li>
                                                <i class="xs-icon x-no"></i>
                                                <img src="../img/t5.png" alt="">
                                                <span class="name">赵萌萌</span>
                                                <span class="zhiye">语文老师</span>
                                          </li>
                                  </ul>    
                             </li>
                    </ul>
              </div>

              <div class="page-cont-list">
                    <a class="p-cont-t">
                            <!-- <i class="pt-icon all-xuanlg"></i> -->
                            校教学处(<span>158</span>) 
                            <i class="s-x g-down"></i>
                    </a>
                    <ul class="lianxiren">
                          <li>
                                  <i class="xs-icon all-xuan"></i>
                                  <img src="../img/t1.png" alt="">
                                  <span class="name">李晓玲</span>
                                  <span class="zhiye">班主任</span>
                          </li>
                    </ul>
              </div>

              <div class="botm">
                      <div class="left">已选择:<span>5</span>人</div>
                      <a class="right" href="qunliaoye.html">确定(<span>5/99</span>)</a>
              </div>
      </div>

</div>
</body>
<script src="../js/zepto.js"></script>
<script src="../js/index.js"></script>
<script>
 (function(){
    // 手风琴效果下拉
    function xiala(x){
        $(x).click(function () {
               $(x).parent().next("ul").slideUp();
               if( $(this).parent().next("ul").css('display') == "none" ){
                    $(this).parent().next("ul").slideDown('ul');
                    $(this).removeClass("g-left").addClass("g-down");
               }else{
                    $(this).parent().next("ul").slideUp('ul');
                    $(this).removeClass("g-down").addClass("g-left");
               } 
        }) 
    }
    xiala("span.color2");
    xiala('.s-x');

      // 选择效果
   function xg(){
      function xuan(x,y,z){
            var n = $(x).find(y).length;
            var m = 0;
            $(x).find(y).each(function(i,v){
                  if(  $(v).hasClass("all-xuan")  ){ m++; }
            });
            if( m ==0 ){ $(x).prev().find(z).removeClass("all-xuan").removeClass("some-xuan").addClass("x-no") }
            if( m >0 && m<n ){ $(x).prev().find(z).removeClass("all-xuan").removeClass("x-no").addClass("some-xuan") }
            if( m == n){ $(x).prev().find(z).removeClass("x-no").removeClass("some-xuan").addClass("all-xuan") }
      }
      $('.lianxiren').each(function(i,v){
           xuan(v, ".xs-icon", '.sm-icon' );   
      })
      xuan('.zuhi', ".xs-icon", '.lg-icon' );
    }
    xg();

      // 个人选择
      $(".lianxiren").find('li').click(function(){
           if( $(this).find('i').eq(0).hasClass("x-no")){
                $(this).find('i').eq(0).removeClass("x-no").addClass("all-xuan")
           }else{
                $(this).find('i').eq(0).addClass("x-no").removeClass("all-xuan")
           }
           xg();
      })

      // 一级图标全选
      $(".lg-icon").click(function(){
            if($(this).hasClass("all-xuan")){
                 $(this).removeClass("all-xuan").addClass("x-no");
                 $(this).parent().next('ul').find(".xs-icon").removeClass("all-xuan").addClass("x-no");
            }else{
                $(this).removeClass("x-no").addClass("all-xuan");
                $(this).parent().next('ul').find(".xs-icon").removeClass("x-no").addClass("all-xuan");
          }
          xg();
      });

      //二级图标全选
      $(".sm-icon").click(function(){
            if($(this).hasClass("all-xuan")){
                 $(this).removeClass("all-xuan").addClass("x-no");
                 $(this).parent().next('ul').find(".sm-icon").removeClass("all-xuan").addClass("x-no");
                 $(this).parent().next('ul').find(".xs-icon").removeClass("all-xuan").addClass("x-no");
            }else{
                $(this).removeClass("x-no").addClass("all-xuan");
                $(this).parent().next('ul').find(".sm-icon").removeClass("x-no").addClass("all-xuan");
                $(this).parent().next('ul').find(".xs-icon").removeClass("x-no").addClass("all-xuan");
          }
          xg();
      })

})();
</script>
</html>